<template>
  <el-form :model="form" ref="formRef">
    <el-row>
      <el-col :offset="10" :span="6">
        <el-form-item prop="headImg" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
         <img :src="form.headImg" class="imgss"  @click="clickImg"/>
         <input v-show="false" ref="fileRef" type="file" accept=".png,.jpeg,.jpg,.gif" @change="imgChange"></input>
           </el-form-item>
      </el-col>
      <el-col :offset="9" :span="4">
        <el-form-item label="生日" prop="birthDay" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
          <el-date-picker
            style="width: 100%;"
            v-model="form.birthDay"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择日期"
          />
        </el-form-item>
      </el-col>

       <el-col :offset="9" :span="4">
        <el-form-item label="地址" prop="workUrl" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
           <el-input
            style="width: 100%;"
            v-model="form.workUrl"
            placeholder="请输入"
            type="textarea"
            :rows="5"
            resize="none"
          />
        </el-form-item>
      </el-col>

       <el-col :offset="9" :span="4">
        <el-form-item label="签名" prop="motto" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
           <el-input
            style="width: 100%;"
            v-model="form.motto"
            placeholder="请输入"
            type="textarea"
            :rows="5"
            resize="none"
          />
        </el-form-item>
      </el-col>
       <el-col :offset="9" :span="4">
        <el-form-item label="性别" prop="sex" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
          <el-radio-group v-model="form.sex">
            <el-radio value="男">男</el-radio>
            <el-radio value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
       <el-col :offset="9" :span="4">
        <el-form-item label="爱好" prop="hobby" :rules="[{ required: true, trigger: 'change', message: '此项必填' }]">
           <el-input-tag v-model="form.hobby" placeholder="回车输入" />
        </el-form-item>
      </el-col>
    </el-row>
     <div style="text-align: center;">
      <el-button type="primary" @click="submit" :loading="form.loading">保存</el-button>
    </div>
  </el-form>
</template>

<script lang="ts">
import {getInfo,save} from '@/api/userInfo'
import { Loading } from '@element-plus/icons-vue';
import { labelInner } from 'echarts/types/src/label/labelStyle.js';
import { layout } from 'echarts/types/src/layout/barGrid.js';
export default {
  data() {
    return {
      form:{
        headImg:'',
        birthDay:'',
        workUrl:"",
        motto:"",
        sex:'',
        hobby:[],
        loading:true
      },
      imgs:'img/2.png'
    }
  },
  created(){
    this.getdata()
  },
  methods:{
    clickImg() {
      const fileRef = this.$refs.fileRef as any
      fileRef.click()
    },
    imgChange(e: Event) {

      const fileInput = e.target as any
      if (!fileInput.files) return
     
      
      const file  = fileInput.files[0]
      const reader = new FileReader();
      reader.onload = (evt: any) => {
        this.form.headImg = evt.target.result as string
      };
      reader.readAsDataURL(file); console.log(file);
    },
    submit(){
       const res = this.$refs.formRef as any
      res.validate((vali: boolean) => {
        if (!vali) return;
        save(this.form).then(()=>{
          this.form.loading=false
        })
       //接口
       console.log('接口');
       
      })
    },
    getdata(){
      getInfo().then((res:any) => {
        console.log(res);
        
        this.form.loading = true
        if(res.code  !== 200)return;
        if(!res.data) return;
        Object.assign(this.form,res.data)
      }).finally(()=>{
        this.form.loading = false
      }).catch(()=>{

      })
    }
  }
}
</script>
  
<style lang="scss" scoped>
  .imgss{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    cursor: pointer;
  }
</style>
